<template>
	<view class="body-view">
		
		<!-- 使用scroll-view实现tabs滑动切换 -->
		<scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent">
			<view class="menu-topic-view" v-for="item in tabs" :id="'tabNum'+item.id" :key="(item.id - 1)"
				@click="swichMenu(item.id - 1)">
				<view :class="currentTab==(item.id - 1) ? 'menu-topic-act' : 'menu-topic'">
					<text class="menu-topic-text">{{item.name}}</text>
					<view class="menu-topic-bottom">
						<view class="menu-topic-bottom-color"></view>
					</view>

				</view>
			</view>
			<image src="/static/images/lunbo/search.png" mode=""></image>
		</scroll-view>
		
		<!-- 内容 -->
		<swiper class="swiper-box-list" :current="currentTab" @change="swiperChange">
			<!-- 全部 -->
			<swiper-item class="swiper-topic-list">
				<scroll-view scroll-y="true" class="scroll-Y"> <!-- scroll-view scroll-y="true" class="scroll-Y" 可以竖向滑动，右边有滚动条-->
					<song-all></song-all>
				</scroll-view>
			</swiper-item>
			<!-- 国学 -->
			<swiper-item class="swiper-topic-list">
				<scroll-view scroll-y="true" class="scroll-Y">
					<song-all></song-all>
				</scroll-view>
			</swiper-item>
			<!-- 英语 -->
			<swiper-item class="swiper-topic-list">
				<scroll-view scroll-y="true" class="scroll-Y">
					<song-all></song-all>
				</scroll-view>
			</swiper-item>
			<!-- 逻辑 -->
			<swiper-item class="swiper-topic-list">
				<scroll-view scroll-y="true" class="scroll-Y">
					<song-all></song-all>
				</scroll-view>
			</swiper-item>
			<!-- 美术 -->
			<swiper-item class="swiper-topic-list">
				<scroll-view scroll-y="true" class="scroll-Y">
					<song-all></song-all>
				</scroll-view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
						id: 1,
						name: '全部'
					},
					{
						id: 2,
						name: '国学'
					},
					{
						id: 3,
						name: '英语'
					},
					{
						id: 4,
						name: '逻辑'
					},
					{
						id: 5,
						name: '美术'
					}
				],
				currentTab: 0,
				tabCurrent: 'tabNum1',
			}
		},
		onLoad() {

		},
		methods: {
			swichMenu(id) {
				this.currentTab = id
				console.log(11, id)
				this.tabCurrent = 'tabNum' + id
			},
			swiperChange(e) {
				console.log(22, e.detail.current)
				let index = e.detail.current
				this.swichMenu(index)
			}
	
		}
	}
</script>

<style scoped lang="scss">
	.scroll-Y {
			height: 100%;
	}
	.body-view {
		height: 100vh;
		width: 100%;
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		align-items: flex-start;
		justify-content: center;
	}
	image {
		height: 28px;
		width: 28px;
		margin-top: 4rpx;
	}

	.top-menu-view {
		display: flex;
		position: fixed;
		z-index: 2;
		overflow: hidden;
		top: 0;
		left: 0;
		white-space: nowrap;
		width: 100%;
		background-color: rgb(245, 180, 62);
		height: 86rpx;
		line-height: 86rpx;
		border-top: 1rpx solid #fa8c16;

		.menu-topic-view {
			display: inline-block;
			white-space: nowrap;
			height: 86rpx;
			position: relative;

			.menu-topic-text {
				font-size: 30rpx;
				color: rgba(0, 0, 0, .4);
				font-weight: 800;
				padding: 10rpx 38rpx;
			}


			.menu-topic-bottom {
				position: absolute;
				bottom: 0;
				width: 100%;

				.menu-topic-bottom-color {
					width: 80rpx;
					height: 10rpx;
				}
			}

			.menu-topic-act .menu-topic-bottom {
				display: flex;
				justify-content: center;
			}

			.menu-topic-act .menu-topic-bottom-color {
				background: #fa8c16;
			}
		}
	}

	.swiper-box-list {
		width: 100%;
		// padding-top: 100rpx;
		margin-top: 100rpx;
		flex: 1;
		background-color: #FFFFFF;

		.swiper-topic-list {
			width: 100%;
		}
	}
	
</style>

